<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="驾校地图"
    ></van-nav-bar>
    <div>
      <iframe
        id="test"
        src="https://m.amap.com/picker/?key=608d75903d29ad471362f8c58c550daf"
        width="100%"
        :height="heights"
        frameborder="0"
      ></iframe>
    </div>
  </div>
</template>
<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?v=1.3&key=d4332e5adb8b584442266763d20b978c"
></script>
<script>
export default {
  name: "Cartography",
  data() {
    const self = this;
    return {
      heights: 0
    };
  },
  mounted() {
    let _this = this;
    let dsBridge = require("dsbridge");
    dsBridge.call("goBack", "", function() {
      history.go(-1);
    });

    // sessionStorage.removeItem("Hsite");
    // sessionStorage.removeItem("Hjd");
    // sessionStorage.removeItem("Hwd");

    let jd = this.$route.params.jd;
    let wd = this.$route.params.wd;
    // 120.429252,41.5872
    // let jd = 116.403954;
    // let wd = 39.915122;
    let center = jd + "," + wd;
    //let center="114,38";
    let iframeUrl =
      "https://m.amap.com/picker/?key=608d75903d29ad471362f8c58c550daf&center=" +
      center;

    document.getElementById("test").src = iframeUrl;

    _this.heights = window.innerHeight + "px";
    var iframe = document.getElementById("test").contentWindow;

    document.getElementById("test").onload = function() {
      iframe.postMessage("hello", "https://m.amap.com/picker/");
    };
    window.addEventListener("message", this.coordinates);
  },

  beforeDestroy() {
    window.removeEventListener("message", this.coordinates);
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style></style>
